import { useEffect, useState } from 'react';
import { isArray, isEmpty, QuestionOutlined } from 'esy-ui';
import dayjs from 'dayjs';
import { Empty, Header } from '@/components';
import { useGlobalStore } from '@/mobx';
import { postUserSuggestList } from '@/services';
import { useFormatText, useNavigation } from '@/hooks';
import { ssSetJsonItem } from '@/utils';

export const typeMap = {
  1: 'text_192',
  2: 'text_193',
  3: 'text_194',
  4: 'text_195',
  5: 'text_196',
  6: 'text_197',
  7: 'text_198',
  8: 'text_199',
  9: 'text_200',
  10: 'text_201',
};

function List() {
  const [list, setList] = useState([]);
  const { changeState } = useGlobalStore();
  const navigation = useNavigation();
  const { text } = useFormatText();

  useEffect(() => {
    changeState('isLoading', true);
    postUserSuggestList({})
      .then((res: any) => {
        setList(res?.Data);
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return (
    <div className='bg-body w-full h-full flex flex-col relative'>
      <Header title='text_191' />
      <div className='flex-1 px-4 py-3'>
        {isArray(list) && !isEmpty(list) ? (
          list.map((it) => (
            <div
              key={it.Id}
              className='bg-white flex items-center rounded-xl mb-4 py-2.5 px-3 gap-2 overflow-hidden'
              onClick={() => {
                ssSetJsonItem('feedback-detail', it);
                navigation('/feedback-detail');
              }}
            >
              <QuestionOutlined className='text-split' />
              <div className='flex-1 overflow-hidden'>
                <div className='flex items-center justify-between flex-1'>
                  <div className='text-base truncate flex-1'>{text(typeMap[it.Type])}</div>
                  <div className='text-bar text-xs ml-2'>{it.InsertTime ? dayjs(it.InsertTime).format('YYYY-MM-DD') : ''}</div>
                </div>
                <div className='text-bar text-xs truncate pr-5'>{it.Describe}</div>
              </div>
            </div>
          ))
        ) : (
          <Empty />
        )}
      </div>
    </div>
  );
}

export default List;
